<template>
	<div class="container-wrap">
		<v-header></v-header>
		<div class="container">
			<div class="container1">
				<p class="con-tit">
					<span class="title-tips">{{classifyName}}</span>
				</p>
				<p class="describe" v-if="questionStem">
					描述:
					<span v-html="questionStem">{{questionStem}}</span>
				</p>
				<p class="con-main" v-html="article"></p>
			</div>
			<div class="container2">
				<li v-for="(bq,bindex) in this.lists" :key="bindex">
					<div class="small-topic">
						<span class="small-index">{{bindex+1}}.</span>
						<input type="text" class="small-input" />
					</div>
					<div
						v-if="classifyName=='单项选择题' || classifyName=='判断题' || classifyName=='顺序选择题' || classifyName == '匹配题'"
					>
						<div class="small-options" v-for="(sq,bindex) in bq.ops" :key="bindex">
							<label>
								<input type="radio" :name="bq.id" />
								<span v-html="sq.value"></span>
							</label>
						</div>
					</div>
				</li>
			</div>

			<!-- 添加笔记 -->
			<van-dialog
				v-model="shownote"
				title="复习笔记"
				show-cancel-button
				confirm-button-text="保存"
				:beforeClose="noteBtn"
			>
				<textarea v-model="message" placeholder="要记点什么吗"></textarea>
			</van-dialog>
			<!-- 查看答案 -->
			<van-dialog v-model="showanswer" title="查看答案">
				<div class="form-group" v-for="(o,oindex) in this.trueOps" :key="oindex">
					<label class="index col-lg-1 col-md-1 col-sm-1 col-xs-12">
						<span>{{oindex+1}}.</span>
					</label>
					<label v-if="o.mediaType==0">
						<span v-html="o.value"></span>
					</label>
					<label v-if="o.mediaType==1" class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
						<audio-tag :id="o.id" :url="o.pathUrl" :type="'b'"></audio-tag>
					</label>
					<label v-if="o.mediaType==2" class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
						<span v-html="o.value"></span>
					</label>
					<label v-if="o.mediaType==3" class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
						<img alt="大题图片" :src="o.pathUrl" title="查看图片" width="250" height="250" />
					</label>
				</div>
			</van-dialog>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
import header from '@/components/content/header'
import footer from '@/components/content/footer'
import api from '@/api/api'
import { Swipe, SwipeItem, Toast, Dialog } from 'vant'
import { mapGetters } from 'vuex'

export default {
	name: 'deepread',
	components: {
		'v-header': header,
		'v-footer': footer,
		[Toast.name]: Toast,
		[Swipe.name]: Swipe,
		[SwipeItem.name]: SwipeItem,
		[Dialog.Component.name]: Dialog.Component,
	},
	data() {
		return {
			isFavorite: false, // 是否已收藏
			Favorite: require('@/assets/collect.png'),
			Favorited: require('@/assets/collected.png'),
			show: false,
			list: [], // 深度阅读的 data
			lists: [], //查询小题
			name: '',
			questionStem: '', //描述
			classifyName: '',
			roleid: '', //用户登录的角色id
			id: '', //题目对应的id
			article: '', // 文章内容
			index: '', // data 的索引
			indexs: 0, // data 的索引
			question: [], // 小题的数组
			total: '', // 小题总数
			answer: [], // 题目的选项
			num: '1', // 第几小题  1/4
			options: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'], // 选项前的标签
			container: [], // 放每个小题选中的索引
			solution: [], // 提交答案的数组 内容
			deep: {}, // 提交答案的对象 索引
			prevRoute: '',
			message: '',
			shownote: false,
			showanswer: false,
			trueOps: [],
		}
	},
	created() {
		this.getDeep()
	},
	computed: {
		...mapGetters(['deepAnswer']),
	},
	beforeRouteEnter(to, from, next) {
		// console.log(from)
		next((vm) => {
			vm.geturl(from.name)
		})
	},
	methods: {
		//查看答案
		showAnswer() {
			this.showanswer = true
		},
		// 显示笔记
		showNote() {
			this.shownote = true
		},
		//查询题目
		getDeep() {
			Toast.loading({ message: '加载中...', forbidClick: true })
			this.teacherid = this.$route.query.teacherid
			this.type = this.$route.query.type
			this.roleid = this.$route.query.roleid
			console.log(this.teacherid)
			console.log(this.type)
			console.log(this.roleid)
			api
				.Entrances(this.teacherid, this.type, '%2525%2525')
				.then((res) => {
					console.log(res)
					this.list = res.result // 深度阅读的 data
					this.article = this.list[0].context
					this.classifyName = this.list[0].classifyName
					this.id = this.list[0].id
					console.log(this.list)
					console.log(this.article)
					console.log('sqs:', this.list.sqs)
					//根据进入训练查询出来的第一个题目id,查出第一个题目的所有内容，包括小题和选项
					api
						.Questions(this.id, this.roleid)
						.then((res) => {
							console.log('result:', res)
							console.log('id:', this.id)
							console.log('小题:', res.result.sqs)
							// this.lists = res.result.sqs

							this.questionStem = res.result.questionStem
						})
						.catch((error) => {
							console.log(error)
						})
					api
						.Chakan(this.id)
						.then((res) => {
							console.log('b:', this.id)
							this.trueOps = res.result
							this.lists = res.result
							console.log(res)
						})
						.catch((error) => {
							console.log(error)
						})
				})
				.catch((error) => {
					console.log(error)
				})
		},

		/* //点击题目名称显示题目的小题和选项
      bqin(id, index){
          console.log(this.list)
          console.log(index)
          this.article=this.list[index].context
           api.Questions(id,this.roleid).then(res=>{
                console.log(res)

                }).catch(error=>{
                  console.log(error)
                })

         },*/
		//点击题目名称显示题目的小题和选项
		bqinx() {
			console.log(this.list)
			if (this.indexs < this.list.length) {
				this.indexs++
				console.log(this.list[this.indexs].id)
				console.log(this.index)
				this.article = this.list[this.indexs].context
				console.log(this.article)
				this.classifyName = this.list[this.indexs].classifyName
				api
					.Questions(this.list[this.indexs].id, this.roleid)
					.then((res) => {
						console.log(res)
						this.classifyName = res.result.classifyName
						this.lists = res.result.sqs
					})
					.catch((error) => {
						console.log(error)
					})
				api
					.Chakan(this.list[this.indexs].id)
					.then((res) => {
						console.log('b:', this.id)
						this.trueOps = res.result
						console.log(res)
					})
					.catch((error) => {
						console.log(error)
					})
			}
		},
		//点击题目名称显示题目的小题和选项
		bqins() {
			console.log(this.list)
			console.log(this.indexs)
			if (this.indexs > 0) {
				this.indexs--
				console.log(this.list[this.indexs].id)
				console.log(this.index)
				this.article = this.list[this.indexs].context
				this.classifyName = this.list[this.indexs].classifyName
				api
					.Questions(this.list[this.indexs].id, this.roleid)
					.then((res) => {
						console.log(res)

						this.lists = res.result.sqs
					})
					.catch((error) => {
						console.log(error)
					})
				api
					.Chakan(this.list[this.indexs].id)
					.then((res) => {
						console.log('b:', this.id)
						this.trueOps = res.result
						console.log(res)
					})
					.catch((error) => {
						console.log(error)
					})
			}
		},

		// 头部 1/4 1的索引
		onChange(index) {
			this.num = index + 1
		},

		// 小题的选中
		IsActive(detail, ind, index) {
			this.$set(this.container, index, ind) // set顺序必须和上面class:active一样  修改container，使得视图可以及时刷新。
			console.log('第' + `${index + 1}` + '道题,选项是' + detail)
			// console.log(this.container)
		},

		// 收藏    没写返回数据给后台
		toggleCollect() {
			if (this.isFavorite) {
				this.isFavorite = false
				Toast('取消收藏')
			} else {
				this.isFavorite = true
				Toast('收藏成功')
			}
		},

		// 添加笔记
		noteBtn(action, done) {
			if (action === 'cancel') {
				this.shownote = false
				done()
			} else if (action === 'confirm') {
				if (!this.message) {
					Toast('请输入笔记,再保存')
					done(false)
				} else {
					console.log('深度阅读笔记:', this.message)
					this.shownote = false
					this.message = ''
					done()
				}
			}
		},

		// 提交
		submit() {
			Dialog.confirm({ message: '是否提交试题?' })
				.then(() => {
					Toast.success('提交成功')
					this.question.forEach((item, index) => {
						let a = this.container[index]
						if (a === undefined) {
							this.solution.push(null)
							this.deep[index] = null
						} else {
							this.solution.push(item.answer[a].option)
							this.deep[index] = a
						}
					})
					setTimeout(() => {
						console.log('深度阅读', this.solution)
						this.$store.dispatch('deepAnswer', this.deep)
						this.$router.push({ path: '/reportread' })
					}, 2000)
				})
				.catch(() => {
					// 取消
				})
		},

		geturl(url) {
			this.prevRoute = url
			// console.log(this.prevRoute)
			if (url == 'readtype') {
				this.$store.dispatch('showAnswer', false)
			}
		},
	},
}
</script>

<style lang="less" scoped>
.container-wrap {
	height: 100vh;
	overflow: hidden;
}
.container {
	font-size: 16px;
	padding: 5px 10px;
	height: calc(100% - 2.346666rem);
	margin-top: 1.173333rem;
	background-color: #fff;
	box-sizing: border-box;
	.container1 {
		height: 50%;
		overflow-y: auto;
		margin-bottom: 2%;
		border-bottom: 1px dashed #999;
		.con-main {
			margin: 10px 0;
			/deep/ div {
				margin: 10px 0;
			}
		}
	}
	.container2 {
		height: 48%;
		overflow-y: auto;
		li {
			margin: 15px 0;
			.small-topic {
				font-weight: bold;
				margin-top: 10px;
				overflow: hidden;

				span {
					font-weight: bold;
					/deep/ p {
						font-weight: bold;
					}
				}
				.small-index {
					float: left;
					margin-right: 5px;
				}
				.small-input {
					border-bottom: 1px solid #999;
					padding: 0 10px;
				}
			}
			.small-options {
				margin: 15px 0;
				overflow: hidden;
				input {
					float: left;
					margin-right: 5px;
				}
			}
		}
	}
	.container3 {
		height: 100%;
		overflow-y: auto;
	}
	.con-tit {
		margin: 10px 0;
		.title-tips {
			font-weight: bold;
			color: #333;
		}
	}
	.describe {
		border: 1px dashed rgb(114, 88, 88);
		padding: 10px;
		/deep/ i {
			font-style: normal;
		}
	}
	/deep/ .van-dialog {
		top: 10px;
		left: calc(50% - 4.26rem);
		height: calc(100vh - 20px);
		overflow: hidden;
		transition: none;
		transform: none;
		display: flex;
		flex-direction: column;
		.van-dialog__content {
			flex: 1;
			padding: 10px;
			overflow-y: auto;
			.form-group {
				display: flex;
				margin: 10px 0;
			}
			.index {
				min-width: 16px;
				text-align: right;
				margin-right: 5px;
			}
		}
	}
}
.deep-con {
	margin: 5px 0;
	background: #fff;
	padding: 10px;
	height: 230px;
	overflow-y: auto;
	.con-tit {
		font-size: 16px;
		color: #333;
		line-height: 20px;
	}
	.con-main {
		font-size: 16px;
		color: #333;
		line-height: 24px;
		text-align: justify;
		margin-top: 5px;
		text-indent: 2em;
	}
}
.bqform-control {
	font-weight: bold;
	height: 32px;
	padding: 5px 8px;
	margin: 5px;
	color: #222;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
	-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
		-webkit-box-shadow ease-in-out 0.15s;
}
.bar {
	height: 36px;
	background: #fff;
	text-align: center;
	position: relative;
	margin-bottom: 5px;
	span {
		font-size: 14px;
		color: #656565;
		line-height: 36px;
		position: absolute;
		left: 10px;
		top: 0;
	}
	img {
		display: inline-block;
		width: 36px;
		line-height: 36px;
	}
}
.deep-main {
	padding: 5px 10px;
	background: #fff;
	height: calc(100% - 345px);
	box-sizing: border-box;
	overflow-y: auto;
}
.item-tit {
	font-size: 16px;
	color: #333;
	line-height: 24px;
	text-align: justify;
	margin-bottom: 10px;
}
.box-item {
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.item-left {
		width: 32px;
		height: 32px;
		border: 1px solid #ff6400;
		border-radius: 16px;
		box-sizing: border-box;
		background: #fff;
		color: #ff6400;
		font-size: 16px;
		text-align: center;
		line-height: 30px;
	}
	.active {
		background: #ff6400;
		color: #fff;
	}
	.item-right {
		width: calc(100% - 40px);
		text-align: justify;
		font-size: 16px;
		color: #333;
		line-height: 22px;
	}
}
.answer {
	font-size: 16px;
	color: #333;
}
.analyse {
	font-size: 16px;
	color: #333;
	margin-top: 10px;
	.detail {
		text-align: justify;
		line-height: 24px;
		margin: 10px 0 30px;
	}
}
.disabeld {
	pointer-events: none;
}
textarea {
	font-size: 14px;
	width: 100%;
	white-space: pre-wrap;
	display: block;
	width: 100%;
	height: 100%;
	text-align: justify;
	box-sizing: border-box;
	border: 0;
	resize: none;
	line-height: 24px;
	padding: 10px 10px 10px 20px;
	color: #323232;
	height: 150px;
}
</style>
